
<template>
  <div class="big">
    <shoptop />
    <Return />
    <div class="content-top">
      <img src="../assets/7.svg" alt="">
      <div class="text">
        <p>购物车是空的，</p>
        <p>去首页添加喜欢的书籍吧</p>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-content">
      <div></div>
      <div class="content">
        <span>￥0.00</span>
        <button>结算</button>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
import Return from "./return.vue";
import shoptop from "./shoptop.vue";
export default {
  components: {
    Return,
    shoptop,
  },
};
</script>

<style scoped>
.bottom {
  width: 100%;
  height: 0.5rem;
  background-color: #f7f7f7;
  position: fixed;
  bottom: 0;
  
}
.bottom-content{
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.content>button{
  width: 0.9rem;
  height: 0.4rem;
  margin-top: 0.05rem;
  border: none;
  color: #fff;
  background-color: #497749;
}
.content>span{
  font-size: 0.18rem;
  margin-right: 0.1rem;
  color:#C75943 ;
}
.content-top{
  width: 90%;
  margin: 0 auto;
  text-align: center;
  margin-top: 3rem;
  color: #666666;
}
</style>